<template>
  <div class="home-container">
    <van-tabs v-model="activeIndex" swipeable>
      <van-tab v-for="item in channels" :title="item.name" :key="item.id">
        <article-list :channel="item" @showMoreAction='hMoreAction'></article-list>
      </van-tab>
    </van-tabs>

    <!-- 频道列表 开关 -->
    <!-- 放哪都可以，固定定位 -->
  <div class="bar-btn" @click="showChannelEdit=true">
    <van-icon name="wap-nav" size="24"/>
  </div>
    <!-- 对文章的更多操作 -->
    <!-- van-popup 弹出层 -->
    <van-popup :style="{ width: '80%' }" v-model="showMoreAction">
      <more-action ref="refMoreAction" @dislike="hDislike" @report="hReport"></more-action>
    </van-popup>

    <!-- 开关弹层 -->
    <van-action-sheet title="编辑频道" v-model="showChannelEdit">
      <!-- 把父组件index.vue 中的channels给子组件channel-edit -->
      <channel-edit :activeIndex="activeIndex" :channels="channels" @updateCurIndex="hUpdateCurIndex" @updateCurChannel="hUpdateCurChannel"  @close="hCloseChannelEdit"></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
// 导入接口
import { getChannels } from '@/api/channel.js'
import { dislikeArticle, reportArticle } from '@/api/article.js'
// 引入文章列表组件
import ArticleList from './articleList.vue'
// 引入更多操作组件
import MoreAction from './moreAction.vue'
// 引入编辑频道组件
import ChannelEdit from './channelEdit.vue'
export default {
  name: 'my-home',

  data () {
    return {
      // 声明数据
      // 我的频道
      channels: [],
      // 弹层-更多操作
      showMoreAction: false,
      // 文章id
      articleId: null,
      // 当前频道号
      activeIndex: 0,
      // 弹层-编辑频道
      showChannelEdit: false
    }
  },
  created () {
    this.getChannels()
  },
  methods: {
    // 更新当前选中频道下标
    hUpdateCurIndex (index) {
      this.activeIndex = index
    },
    // 把当前channel改为选中状态
    hUpdateCurChannel (channel) {
      this.activeIndex = this.channels.findIndex(item => item.id === channel.id)
    },
    // 关闭频道编辑弹层
    hCloseChannelEdit () {
      this.showChannelEdit = false
    },
    // 删除文章
    delArticle () {
      // 去articleList中删除对应的文章
      // 通过事件总线发布一个事件
      // 参数中传入文章编号和当前频道号
      this.$eventBus.$emit('delArticle', {
        articleId: this.articleId,
        channelId: this.channels[this.activeIndex].id
      })
    },
    // 反馈垃圾内容
    async hReport (typeId) {
      // typeId 为举报类型

      // 1 调用接口
      const result = await reportArticle(this.articleId, typeId)
      console.log(result)
      // 2 退出弹层
      this.showMoreAction = false
      this.$toast('操作成功')
      // 3 删除文章
      this.delArticle()
    },

    // 收到moreAction中的不感兴趣
    async hDislike () {
      // 1 调用接口
      const result = await dislikeArticle(this.articleId)
      console.log(result)
      // 2 退出弹层
      this.showMoreAction = false
      this.$toast('操作成功')
      // 3 删除文章
      this.delArticle()
    },
    // 处理子组件articleList中的点击x
    hMoreAction (articleId) {
      // 显示弹窗
      this.showMoreAction = true
      if (this.$refs.refMoreAction) {
        // 父传子，修改子组件中的数据
        this.$refs.refMoreAction.isReport = false
      }
      // console.log(articleId)
      // 保存当前操作的文章编号
      this.articleId = articleId
    },
    async getChannels () {
      const result = await getChannels()
      console.log(result)
      // 把接口返回的数据保存在channels中
      this.channels = result.data.data.channels
      // console.log(this.channels)
    }
  },
  // 注册路由
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  }
}
</script>

<style scoped lang='less'>
// 频道 开关
.bar-btn{
    position: fixed;
    right: 5px;
    top: 52px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1
}
</style>
